<template>
  <div class="box">
    <div class="LeftBox">
      <!-- open -->
      <a href="#">
        <i class="i23" :class="header_IsCollapse ? 'el-icon-s-unfold ' : 'el-icon-s-fold'"
          @click="IsCollapseChange"></i>
      </a>
      <!-- shut -->
      <!-- <i class="el-icon-s-unfold"></i> -->
    </div>

    <!-- 右侧 -->
    <div class="RightBox dflex">
      <!-- 消息 -->
      <el-badge :value="3">
        <i class="el-icon-bell i23"></i>
      </el-badge>
      <!-- 头像  用户名 -->
      <div class="dflex">
        <el-avatar :size="25" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
        &nbsp;
        <span>张三</span>
      </div>
      <!-- 语言 -->
      <el-dropdown>
        <span>
          中文<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>中文</el-dropdown-item>
          <el-dropdown-item>English</el-dropdown-item>
          <el-dropdown-item>Русский</el-dropdown-item>
          <el-dropdown-item>Español</el-dropdown-item>
          <el-dropdown-item>Français</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import EventBus from '@/assets/ComponentLibrary/eventBus/eventBus.js';

export default {
  name: "MainHeader",
  data() {
    return {
      header_IsCollapse: false
    };
  },
  created() {
    // this.IsCollapseChange();
    // 同步 header_IsCollapse

    // },
    // 同步 header_IsCollapse
    this.leftAside_IsCollapse();
  },
  // mounted() {
  //   this.leftAside_IsCollapse();
  // },
  methods: {
    IsCollapseChange() {
      // 发送;
      EventBus.emit('header_IsCollapse', {
        // header_IsCollapse: !this.header_IsCollapse
      });
      // this.leftAside_IsCollapse();
      // console.log('go');
    },
    leftAside_IsCollapse() {
      // 接收
      EventBus.on('leftAside_IsCollapse', param => {
        this.header_IsCollapse = param.leftAside_IsCollapse;
        // console.log(this.header_IsCollapse);
        // console.log('Header收到');
      });
    }
  }

};
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  justify-content: space-between;
  color: #6F7374;
  // box-sizing: border-box;

  // >.LeftBox,
  .RightBox {
    >div {
      margin: 0 8px;
      padding: 2px;
      // background-color: white
    }

    >div:hover {
      background-color: rgb(236, 245, 255);
      // padding: 2px;
      border-radius: 20% 5%;
      box-sizing: border-box;
    }

  }
}

.dflex {
  display: flex;
}

.i23 {
  font-size: 23px;
}
</style>
